<template>
  <div class="question">
        <div class="search">
            <van-search
              v-model="searchValue"
              shape="round"
              background="#2ba5d9"
              placeholder="请输入搜索关键词"
            />
            <van-icon name="scan" />
        </div>
        <div class="banner">
          <van-swipe class="my-swipe" :autoplay="3000">
            <van-swipe-item v-for="(item,index) in imgList" :key="index">
              <img :src="item" alt="" class="img_item">
            </van-swipe-item>
          </van-swipe>
        </div>
        <van-grid :gutter="10" column-num="5" :border='false'>
          <van-grid-item v-for="(item,index) in gridList" :key="index" :icon="item.icon" :text="item.text" />
        </van-grid>
        <div class="con">
          <div class="con_box">
            <div class="title"><h3>限时优惠</h3><span>更多&gt;</span></div>
            <div class="con_content">
              <div v-for="(item,index) in drugsList"
              :key="index"
              class="con_item">
                <img :src="item.img" alt="">
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>
          <div class="con_box">
            <div class="title"><h3>限时优惠</h3><span>更多&gt;</span></div>
            <div class="con_content">
              <div v-for="(item,index) in drugsList"
              :key="index"
              class="con_item">
                <img :src="item.img" alt="">
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        searchValue:'',
        imgList:[
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1445774767,2153362972&fm=26&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2724840205,433035322&fm=26&gp=0.jpg',
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1913372599,2477656893&fm=26&gp=0.jpg'
        ],
        gridList:[
          {
            "icon":'gem-o',
            "text":"妇产科"
          },
          {
            "icon":'gem-o',
            "text":"男科"
          },
          {
            "icon":'gem-o',
            "text":"儿科"
          },
          {
            "icon":'gem-o',
            "text":"消化科"
          },
          {
            "icon":'gem-o',
            "text":"皮肤科"
          },{
            "icon":'gem-o',
            "text":"呼吸科"
          },
          {
            "icon":'gem-o',
            "text":"感染科"
          },
          {
            "icon":'gem-o',
            "text":"耳鼻喉"
          },
          {
            "icon":'gem-o',
            "text":"保健食"
          },
          {
            "icon":'gem-o',
            "text":"医疗器"
          }
        ],
        drugsList:[{
          "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608135508355&di=12bd5149ea5c09164957f6c5d42e2899&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F19%2F0765a6947f42a54dada0802de021ef86.jpg",
          "title":"Nature复合维生素片60片/罐"
        },{
          "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608135623868&di=4aa2f616bf4bbee6d93a63e2d6aa31fb&imgtype=0&src=http%3A%2F%2Fimages.669pic.com%2Felement_pic%2F33%2F3%2F62%2F44%2Fb977d1fe664446644e0276a29d7065ef.jpg",
          "title":"Nature复合维生素片60片/罐"
        },{
          "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608135623867&di=713a9d41679025094521258bdf4ca78e&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201212%2F04%2F20121204155922_PkfJi.jpeg",
          "title":"Nature复合维生素片60片/罐"
        },{
          "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608135508355&di=12bd5149ea5c09164957f6c5d42e2899&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F19%2F0765a6947f42a54dada0802de021ef86.jpg",
          "title":"Nature复合维生素片60片/罐"
        }]
      }
    }
}
</script>

<style lang="scss" scoped>
    .question{
      width: 100%;
      .search{
        width: 100%;
        height: 50px;
        display: flex;
        background: #2ba5d9;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        position: sticky;
        z-index: 99;
        left: 0;
        top: 0;
        .van-search{
          height: 50px;
          width: 90%;
        }
        .van-icon{
          font-size: 26px;
        }
      }
      .banner{
        width: 100%;
        .my-swipe{
            width: 100%;
            .img_item{
              width: 90%;
              height: 150px;
              display: block;
              margin: 10px auto;
              border-radius: 20px;
            } 
          }
      }
      .con{
        width: 100%;
        .con_box{
          width: 100%;
          .title{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center; 
            padding: 0 10px;  
          }
          .con_content{
            width: 100%;
            display: flex;
            overflow-x: auto;
            .con_item{
                width: 150px;
                margin: 0 10px;
                img{
                  display: block;
                  width: 100px;
                  height: 100px;
                }
                span{
                  font-size: 12px;
                  margin-bottom: 5px;
                }
            }
          }
        }
      }
    }
</style>